<template>
    <div style="width: 100%; height: 100%">
        <div class="login_logo">
            <div class="imgBox"></div>
        </div>
        <div id="slaveLogin">
            <div class="des">
                <div>药店登记系统</div>
                <div>让药品和购买人登记更便捷</div>
            </div>
            <div class="bottomDes">
                <div>版权所有 © 2021 一小时软件科技有限公司 苏ICP备13054122号-2</div>
            </div>
            <div id="loginBox">
                <div class="logo">
                    <p>
                        欢迎登录<span @click="$router.push('/register')" style="font-size: 14px"
                            >&nbsp;&nbsp;
                            <el-link type="primary">去注册</el-link>
                        </span>
                    </p>
                </div>
                <div class="toast" v-if="canShow"><i class="el-icon-warning-outline"></i>&nbsp;&nbsp;{{ toastText }}</div>
                <div id="loginForm">
                    <el-form
                        class="login-form"
                        autocomplete="off"
                        :model="loginForm"
                        :rules="formRules"
                        ref="loginForm"
                        label-position="left"
                        size="medium"
                        @submit.native.prevent
                    >
                        <el-form-item prop="account" class="elForemItem" :rules="formRules.blur" :show-message="false">
                            <div class="leftLabel">用户名</div>
                            <el-input name="username" type="text" v-model="loginForm.account" id="input_username" placeholder="请输入用户名" />
                        </el-form-item>
                        <el-form-item prop="password" class="elForemItem" :rules="formRules.blur" :show-message="false">
                            <div class="leftLabel">密&nbsp;&nbsp;&nbsp;码</div>
                            <el-input name="password" type="password" v-model="loginForm.password" id="input_password" placeholder="请输入密码" />
                        </el-form-item>
                        <el-button type="primary" class="login-btn" @click="handleLogin(false)"> 药店登录 </el-button>
                        <el-button type="primary" class="login-btn1" @click="handleLogin(true)"> 管理员登录 </el-button>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';
import { formRules } from '@/common/util/validator';
import { api } from '@/http/api';
var md5 = require('js-md5');
@Component({})
export default class Login extends Vue {
    public disYzm: boolean = true;
    public toastText: string = '';
    public onLine = true;
    public transitionName: string = '';
    public yzmLogin: boolean = true;
    public userLogin: boolean = true;
    public canShow: boolean = false;
    industryList = [];
    public $refs: {
        loginForm: HTMLFormElement;
        registerForm: HTMLFormElement;
    };

    public loginForm = {
        account: 'Admin',
        password: '1234567',
        // account: 'dxl',
        // password: 'dxlani001',
    };
    public btnMessage: string = '获取验证码';
    public countDowning: boolean = false;
    /**
     * 倒计时
     */
    interval: any;
    public formRules = formRules;
    created() {
        this.canShow = false;
    }
    mounted() {}

    beforeDestroy() {}

    resetForm(formName) {
        if (this.$refs[formName] !== undefined) {
            this.$refs[formName].resetFields();
        }
        switch (formName) {
            case 'loginForm':
                break;
            case 'loginForm1':
                break;
            case 'registerForm':
                break;
            default:
                break;
        }
    }
    /**
     * 倒计时
     */
    countCode() {
        this.disYzm = true;
        this.countDowning = true;
        let i = 60;
        this.interval = setInterval(() => {
            this.btnMessage = `${--i}秒后重试`;
            if (i === 0) {
                clearInterval(this.interval);
                this.btnMessage = '获取验证码';
                this.disYzm = false;
                this.countDowning = false;
            }
        }, 1000);
    }
    /**
     * 登录
     */
    handleLogin(adminLogin) {
        console.log('adminLogin', adminLogin);
        this.$refs.loginForm.validate((valid) => {
            if (valid) {
                if (adminLogin) {
                    api.AdminAccount_AdminAccountLogin(this.loginForm)
                        .then((res) => {
                            sessionStorage.setItem('jwtToken', res.encodedJwt);
                            sessionStorage.setItem('name', res.managementName);
                            this.$router.push('./dashboard').catch(() => {});
                        })
                        .catch((e) => {
                            this.toastText = e;
                            this.canShow = true;
                        });
                    sessionStorage.setItem('admin', '1');
                } else {
                    api.Pharmacy_PharmacyLogin(this.loginForm)
                        .then((res) => {
                            sessionStorage.setItem('jwtToken', res.encodedJwt);
                            sessionStorage.setItem('name', res.drugstoreName);
                            this.$router.push('./dashboard').catch(() => {});
                        })
                        .catch((e) => {
                            this.toastText = e;
                            this.canShow = true;
                        });
                    sessionStorage.setItem('admin', '2');
                }
            } else {
                this.canShow = true;
                this.toastText = '请先输入账号密码';
            }
        });
    }
}
</script>

<style lang="scss" scoped>
.login_logo {
    font-family: PingFangSC-Medium;
    font-size: 20px;
    color: #000;
    letter-spacing: 0;
    position: fixed;
    top: 35px;
    left: 30px;
    z-index: 99999;
    line-height: 30px;
    display: flex;
    align-items: center;
    .icondenglu {
        font-size: 28px;
        vertical-align: bottom;
        margin-right: 10px;
    }
}
#slaveLogin {
    width: 100%;
    height: 100vh;
    background: #1a4091 url('../assets/img/bg.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    .tips {
        font-family: PingFangSC-Regular;
        font-size: 18px;
        color: #000;
        letter-spacing: 0;
        text-align: center;
        width: 100%;
        bottom: 130px;
        position: absolute;
    }
    #loginBox {
        background-color: #f2efec;
        width: 480px;
        height: 550px;
        position: absolute;
        top: 40%;
        left: 70%;
        margin-left: -50px;
        margin-top: -200px;
        padding-top: 30px;
        border-radius: 15px;
        overflow: hidden;
        z-index: 99;
        .logo {
            padding-left: 40px;
            text-align: left;
            margin-bottom: 40px;
            img {
                width: 50px;
                vertical-align: middle;
                margin-right: 5px;
            }
            p {
                color: #000;
                font-size: 32px;
                font-weight: 600;
                margin-top: 0;
                margin-bottom: 10px;
            }
            div {
                font-size: 16px;
                font-weight: 500;
            }
            span {
                cursor: pointer;
                color: $red;
            }
        }
        .loginType {
            text-align: left;
            font-size: 16px;
            text-align: center;
            margin-top: 45px;
            color: #333333;
            padding: 0 10px;
            cursor: pointer;
            :first-child {
                margin-right: 80px;
            }
            .active {
                font-size: 16px;
                color: #1890ff;
                user-select: none;
                padding: 0 10px;
                font-weight: 400;
                position: relative;
                border-bottom: 2px solid #3581f7;
                padding-bottom: 12px;
            }
            span:hover {
                color: #1890ff;
            }
        }
        #loginForm {
            padding: 28px 75px 0 110px;
            overflow: hidden;
            width: 100%;
            /deep/ .elForemItem {
                position: relative;
            }
            .leftLabel {
                position: absolute;
                top: 1px;
                left: -65px;
                font-size: 16px;
                font-weight: 500;
            }

            /deep/ .el-input__inner {
                padding-left: 20px;
                background: #fff;
                width: 330px;
                height: 40px;
                font-size: 16px;
                line-height: 24px;
            }
            /deep/ #input_code {
                width: 200px;
            }
            input {
                background: #fff;
                border-radius: 3px;
                text-align: left;
            }
            .login-btn {
                margin-top: 60px;
                height: 50px;
                border-radius: 20px;
                font-weight: 400;
                width: 400px;
                color: #fff;
                font-size: 16px;
                line-height: 24px;
                font-family: PingFangSC-Medium;
                letter-spacing: 0;
                position: absolute;
                left: 40px;
            }
            .login-btn1 {
                margin-top: 60px;
                height: 50px;
                border-radius: 20px;
                font-weight: 400;
                width: 400px;
                color: #fff;
                font-size: 16px;
                line-height: 24px;
                font-family: PingFangSC-Medium;
                letter-spacing: 0;
                position: absolute;
                left: 30px;
                bottom: 100px;
            }
            .login-btn[disabled]:hover {
                cursor: not-allowed;
            }
            .yzm_btn {
                position: absolute;
                right: -34px;
                top: 2px;
            }
        }
    }

    .svg-container {
        padding: 4px 2px;
        border-right: 1px solid #dcdfe6;
        vertical-align: middle;
        width: 35px;
        display: inline-block;
    }
    .svg-container-close {
        vertical-align: middle;
        display: inline-block;
        cursor: pointer;
    }
    .svg-container-code {
        right: 20px;
        vertical-align: middle;
        display: inline-block;
        cursor: pointer;
        color: #3563c5;
        position: absolute;
        line-height: 49px;
    }
    .el-input--medium {
        display: inline-block; //  width:76%;
    }
    .el-input--medium.code {
        display: inline-block;
        // width: 60%;
    }
    .iconfont {
        color: #dcdfe6;
    }
    .iconrenfuzhi {
        color: rgba(0, 0, 0, 0.247058823529412);
        font-size: 20px;
    }
    .iconShapefuzhi {
        color: rgba(0, 0, 0, 0.247058823529412);
        font-size: 20px;
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.5s;
    }
    .fade-leave-to {
        display: none;
    }
    .fade-enter,
    .fade-leave-to/* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    will-change: transform;
    transition: all 0.3s;
    position: absolute;
    width: 100%;
    left: 0;
}
.slide-right-enter {
    transform: translateX(-100%);
}
.slide-right-leave-active {
    transform: translateX(100%);
}
.slide-left-enter {
    transform: translateX(100%);
}
.slide-left-leave-active {
    transform: translateX(-100%);
}
.copyRight {
    height: 5vh;
    line-height: 5vh;
    /* background: #3563c5; */
    color: #fff;
    text-align: center;
    font-size: 0.08333rem;
    background: #fff;
    opacity: 0.1;
    position: fixed;
    bottom: 0;
    width: 100%;
}
.copyRight2 {
    height: 5vh;
    line-height: 5vh;
    z-index: 999;
    padding-left: 28px;
    color: rgba(0, 0, 0, 0.447058823529412);
    text-align: center;
    font-size: 14px;
    position: fixed;
    bottom: 10px;
    width: 100%;
}
.registerClass {
    text-align: right;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    margin-bottom: 30px;
}
.addcompany {
    width: 60%;
    margin: 0 auto;
}
.upload-img {
    width: 100px;
    height: 100px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    cursor: pointer;
    img {
        width: 100px;
        height: 100px;
    }
    .avatar-uploader-icon {
        color: #000;
        font-size: 24px;
        height: 100px;
        line-height: 94px;
    }
}
#loginForm {
    /deep/ .el-input {
        font-size: 16px;
    }
}

.des {
    position: absolute;
    top: 280px;
    left: 200px;
    color: #fff;
}

.des div:nth-child(1) {
    font-size: 55px;
    font-weight: 500;
    margin-bottom: 16px;
}
.des div:nth-child(2) {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 16px;
}

.bottomDes {
    position: absolute;
    bottom: 100px;
    left: 100px;
    font-size: 14px;
    color: #d1d1d1;
}

.imgBox {
    margin-top: 10px;
    margin-left: 30px;
    width: 163.2px;
    height: 50px;
    // background: url('../assets/img/logo.png') no-repeat;
    background-size: 100%;
}
.logo-text {
    font-family: PingFangSC-Medium;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0;
}

.loginForm-verticalLine {
    left: 0.23958rem;
    position: absolute;
    width: 0.00521rem;
    height: 90%;
    background-color: #dee5f0;
    margin-top: 3px;
    z-index: 1;
}
.personImg {
    position: absolute;
    top: 7px;
    z-index: 999;
    left: 12px;
}
.toast {
    position: absolute;
    padding-left: 45px;
    font-size: 14px;
    color: $red;
}

// /deep/ .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus {
//     border: 1px solid rgb(220, 223, 230);
// }
</style>
